<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
<div id="box">
    <div class="row justify-content-center m-3"><h1>管理系统管理部门</h1></div>
    <table class="table table-striped" id="table" >
        <thead>
        <tr>
            <th scope="col">部门编号</th>
            <th scope="col">部门名称</th>
            <th scope="col">部门经理</th>
            <th scope="col">电话号码</th>
            <th scope="col">邮箱</th>
            <th scope="col">成立时间</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr V-for="tt in msg">
            <th scope="row">{{tt.deptId}}</th>
            <td>{{tt.deptName}}</td>
            <td>{{tt.leader}}</td>
            <td>{{tt.phone}}</td>
            <td>{{tt.email}}</td>
            <td>{{tt.createTime}}</td>

            <td>
                <div class="dropdown">
                    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                       data-toggle="dropdown" aria-expanded="false">
                        选项
                    </a>

                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <a class="dropdown-item" data-toggle="modal" data-target="#exampleModal1" @click="sele()">查看</a>
                        <a class="dropdown-item" data-target="#myModal" data-toggle="modal">修改</a>
                        <a class="dropdown-item" data-toggle="modal" data-target="#exampleModal">删除</a>
                        <a class="dropdown-item" data-toggle="modal" data-target="#exampleModal">导出</a>


                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>

    <!--    查看-->
    <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel1">查看</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-striped" id="table1" >
                        <thead>
                        <tr>
                            <th scope="col">员工姓名</th>
                            <th scope="col">邮箱</th>
                            <th scope="col">电话号码</th>
                            <th scope="col">性别</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr V-for="tt in msg">
                            <!--<th scope="row">{{tt.deptId}}</th>
                            <td>{{tt.deptName}}</td>
                            <td>{{tt.leader}}</td>
                            <td>{{tt.phone}}</td>
                            <td>{{tt.email}}</td>
                            <td>{{tt.createTime}}</td>-->
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

                </div>
            </div>
        </div>
    </div>




</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script>
        new Vue({
            el: '#box',
            data() {
                return {
                    msg: null,
                    sele:null
                }
            },
            mounted() {
                axios.post('allbm')
                    .then(response => (this.msg = response.data))

                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });

            },
            methods:{
                //查看部门员工
                sele:function (){
                    //发送 post 请求 查找报告
                    this.$http.post('./wsall',{name:this.$refs.name.value,bumen:this.$refs.bumen.value},{emulateJSON:true}).then(response => (this.sele = response.data))

                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                }
            },
        })
</script>
</body>
</html>